<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>优化税收营商环境，助力企业高质量发展</title>
    <link href="https://fonts.googleapis.com/css?family=Luckiest+Guy&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./lib/Animate/animate.min.css">
    <link rel="stylesheet" href="./lib/swiper/css/swiper.css">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/lkaudio.css">
</head>

<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div id="audioDiv">
                <audio id="audioBG" controls="controls" loop="loop" autoplay="autoplay" style="display: none;">
                    <source src="" type="audio/mpeg" />
                </audio>
            </div>
            <div class="swiper-slide swiper-1">
                <header>
                    <!-- <p>国家税务总局深圳市税务局</p> -->
                </header>
                <main>
                    <p>深圳市税务局</p>
                    <p>优化税收营商环境办公室</p>
                </main>
                <footer>
                    <div class="bg-box">
                        <p>打造税收国际范</p>
                        <p>深圳营商新时代</p>
                        <img src="./image/pic.jpg" alt="">
                    </div>
                </footer>
                <div class="slide-up-btn animated bounce flash">
                    <a href="javascript:;"><img src="./image/slide_up_black.png" alt=""></a>
                </div>
            </div>
            <div class="swiper-slide swiper-2">
                <div class="section-one">
                    <p>深圳税务音频课堂</p>
                    <p>优化税收营商环境 <span>“税轻松 圳行动”</span></p>
                    <p>第二期：非接触式办税举措</p>
                </div>
                <div class="section-four">
                    <div id="demo1">
                        <div class="lkaudio forbid-text-selected">
                            <!-- 播放控制 -->
                            <div class="lka-play-control">
                                <div class="lka-play-button show">
                                    <svg t="1586783695921" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="8589" width="100%" height="100%">
                                        <path d="M896 512L128 1024V0z" p-id="8590" fill="#2c2c2c"></path>
                                    </svg>
                                </div>
                                <div class="lka-pause-button hide">
                                    <svg t="1586783770062" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="9609" width="100%" height="100%">
                                        <path d="M128 0h253.155556v1024H128V0z m512 0h256v1024h-256V0z" fill="#2c2c2c"
                                            p-id="9610">
                                        </path>
                                    </svg>
                                </div>
                            </div>
                            <!-- 时间 -->
                            <div class="lka-time">
                                <span class="lka-time-current">00:00</span> /
                                <span class="lka-time-total">00:00</span>
                            </div>
                            <!-- 时间轴 -->
                            <div class="lka-timeline">
                                <div class="lka-timeline-baseline">
                                    <div class="lka-timeline-load"></div>
                                    <div class="lka-timeline-play"></div>
                                    <span class="lka-timeline-activepoint"></span>
                                </div>
                            </div>
                            <!-- 音量控制 -->
                            <!-- <div class="lka-volume-control">
                                <div class="lka-volume-button show">
                                    <svg t="1586787437558" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4722" width="100%" height="100%">
                                        <path
                                            d="M526.432 924.064c-20.96 0-44.16-12.576-68.96-37.344L274.752 704H192c-52.928 0-96-43.072-96-96V416c0-52.928 43.072-96 96-96h82.752l182.624-182.624c24.576-24.576 47.744-37.024 68.864-37.024C549.184 100.352 576 116 576 160v704c0 44.352-26.72 60.064-49.568 60.064zM687.584 730.368a31.898 31.898 0 0 1-18.656-6.016c-14.336-10.304-17.632-30.304-7.328-44.672l12.672-17.344C707.392 617.44 736 578.624 736 512c0-69.024-25.344-102.528-57.44-144.928-5.664-7.456-11.328-15.008-16.928-22.784-10.304-14.336-7.04-34.336 7.328-44.672 14.368-10.368 34.336-7.04 44.672 7.328 5.248 7.328 10.656 14.464 15.968 21.504C764.224 374.208 800 421.504 800 512c0 87.648-39.392 141.12-74.144 188.32l-12.224 16.736c-6.272 8.704-16.064 13.312-26.048 13.312z"
                                            p-id="4723" fill="#2c2c2c"></path>
                                        <path
                                            d="M796.448 839.008a31.906 31.906 0 0 1-21.088-7.936c-13.28-11.648-14.624-31.872-2.976-45.152C836.608 712.672 896 628.864 896 512s-59.392-200.704-123.616-273.888c-11.648-13.312-10.304-33.504 2.976-45.184 13.216-11.648 33.44-10.336 45.152 2.944C889.472 274.56 960 373.6 960 512s-70.528 237.472-139.488 316.096c-6.368 7.232-15.2 10.912-24.064 10.912z"
                                            p-id="4724" fill="#2c2c2c"></path>
                                    </svg>
                                </div>
                                <div class="lka-volume-close-button hide">
                                    <svg t="1586787425794" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="4556" width="100%" height="100%">
                                        <path
                                            d="M192 320c-54.4 0-96 41.6-96 92.8V608c0 54.4 41.6 96 96 96h83.2l182.4 188.8c22.4 22.4 44.8 35.2 67.2 35.2 6.4 0 12.8 0 19.2-3.2 19.2-9.6 32-28.8 32-51.2v-224L233.6 320H192z m758.4 489.6l-57.6-54.4C934.4 681.6 960 598.4 960 512c0-115.2-41.6-227.2-118.4-316.8-12.8-12.8-32-16-44.8-3.2-12.8 12.8-16 32-3.2 44.8 64 76.8 102.4 176 102.4 275.2 0 70.4-19.2 137.6-51.2 195.2L752 617.6c9.6-35.2 16-70.4 16-105.6 0-73.6-22.4-144-67.2-204.8-9.6-16-28.8-19.2-44.8-6.4s-19.2 28.8-6.4 44.8c35.2 48 54.4 108.8 54.4 166.4 0 19.2-3.2 38.4-6.4 54.4L576 451.2V153.6c0-25.6-12.8-44.8-32-51.2-25.6-9.6-57.6 0-86.4 32L352 240 214.4 105.6c-12.8-12.8-32-12.8-44.8 0-12.8 12.8-12.8 32 0 44.8l736 704c6.4 6.4 12.8 9.6 22.4 9.6 9.6 0 16-3.2 22.4-9.6 12.8-12.8 12.8-32 0-44.8z"
                                            p-id="4557" fill="#2c2c2c"></path>
                                    </svg>
                                </div>
                            </div> -->
                            <!-- 更多 -->
                            <!-- <div class="lka-more">
                                <div class="lka-more-button">
                                    <svg t="1586787761676" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                        xmlns="http://www.w3.org/2000/svg" p-id="26929" width="100%" height="100%">
                                        <path
                                            d="M512 118.153846m-118.153846 0a118.153846 118.153846 0 1 0 236.307692 0 118.153846 118.153846 0 1 0-236.307692 0Z"
                                            fill="#2c2c2c" p-id="26930"></path>
                                        <path
                                            d="M512 512m-118.153846 0a118.153846 118.153846 0 1 0 236.307692 0 118.153846 118.153846 0 1 0-236.307692 0Z"
                                            fill="#2c2c2c" p-id="26931"></path>
                                        <path
                                            d="M512 905.846154m-118.153846 0a118.153846 118.153846 0 1 0 236.307692 0 118.153846 118.153846 0 1 0-236.307692 0Z"
                                            fill="#2c2c2c" p-id="26932"></path>
                                    </svg> </div>
                            </div> -->
                            <!-- 音频本体 -->
                            <div id="lka-audio">
                                <!-- autoplay="autoplay" -->
                                <audio class="audio hide" controls="controls">
                                    <source src="" type="audio/mpeg" />
                                </audio>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="section-two animated fadeIn">
                    <img src="./image/image_01.jpg" alt="img" id="page2img">
                </div>
                <div class="section-three">
                    <p id="page2text">今天向大家介绍，疫情防控期间，“非接触式”线上办税渠道。</p>
                </div>
            </div>
        </div>
        <!-- <a href="https://www.ruiyoo.net/nsrxt/h5/listentax/"><div class="return">返回</div></a> -->
    </div>
</body>
<script src="./lib/jquery-3.4.1/jquery-3.4.1.js"></script>
<script src="./lib/swiper/js/swiper.js"></script>
<script src="./js/rem.js"></script>
<script src="./js/lkaudio.js"></script>
<script src="./js/index.js"></script>
<script>
    var audio = new LKAudio({
        el: '#demo1',               // 容器元素
        src: './audio/audio.mp3',         // 路径
        check: 200,                 // 钩子函数检查时间
        volume: true,               // 允许音量控制
        more: true,                 // 运行更多
        // 时间轴钩子函数
        timeline(t) {
            checkInfo(textlsit, imglist, last, t);
        }
    })

    // 时间轴概念版 数据
    var textlsit = [
        { time: 0, text: '今天向大家介绍，疫情防控期间，“非接触式”线上办税渠道。' },
        { time: 30190, text: '如有政策或流程更新，均以最新资讯为准。' },
        { time: 36090, text: '如果你因为疫情原因还没有回深，因安全问题要减少出门，有哪些“非接触式”办税渠道可以足不出户就能办税呢？' },
        { time: 49010, text: '我们将为大家一一介绍“线上办税”、“线上咨询辅导”和“线上发票申领”的方法。' },
        { time: 59120, text: '“线上办税”首选电子税务局。' },
        { time: 82090, text: '“线上办税”还有“@深税”平台。' },
        { time: 98230, text: '通过平台可办理代开发票、开具证明，轻松完成申报，一站式接收通知。' },
        { time: 114150, text: '如果您有相关的办税问题，可以拨打12366咨询热线、或者通过网上咨询平台第一时间获取解答。' },
        { time: 148150, text: '使用税控设备开具发票可通过深圳纳税微信服务号办理发票申领业务。' },
        { time: 167240, text: '无需登录电子税务局，无需税控盘，直接在“深圳税务微信服务号”下单，当天即可发货，可持身份证实名签收。' },
        { time: 183020, text: '使用区块链电子发票，可以直接在线注册使用。' },
        { time: 188130, text: '免开发、免对接，不需领票、不需税控设备、无接触自助开票、无票量票额限制。' },
        { time: 199070, text: '使用区块链电子发票还具有七大优点：速度更快捷、管理更简单、入账更及时，有效降低企业经营成本，' },
        { time: 210170, text: '规范内部财务管理，更利于消费者保存使用发票，也更能保证广大纳税人和消费者的人身安全。' },
        { time: 221010, text: '优化税收营商环境，我们一直在行动。' },
        { time: 225040, text: '今年我们也将持续优化线上办税系统，通过“非接触式”办税压缩纳税时间，提高办税效率。' },
        { time: 246220, text: '请大家继续关注优化税收营商环境“税轻松 圳行动”系列音频课程。' },
    ]

    var imglist = [
        { time: 0, src: './image/image_01.jpg' },
        { time: 36090, src: './image/image_12.jpg' },
        { time: 49010, src: './image/image_11.jpg' },
        { time: 59120, src: './image/image_04.jpg' },
        { time: 82090, src: './image/image_05.jpg' },
        { time: 114150, src: './image/image_02.jpg' },
        { time: 126000, src: './image/image_10.jpg' },
        { time: 148150, src: './image/image_06.jpg' },
        { time: 183020, src: './image/image_08.jpg' },
        { time: 237240, src: './image/image_09.jpg' },
    ]


    var last = {
        text: null,
        img: null
    }

    function checkInfo(textlsit, imglist, last, t) {
        t = t * 1000;
        
        // 最后一次符合的信息
        let textFinally = textlsit[0];
        let imgFinally = imglist[0];

        // 找文本
        for (let index = 0, len = textlsit.length; index < len; index++) {
            const item = textlsit[index];
            if (item.time < t) textFinally = item;
            else break;
        }

        // 找图
        for (let index = 0, len = imglist.length; index < len; index++) {
            const item = imglist[index];
            if (item.time < t) imgFinally = item;
            else break;
        }

        if (last.text != textFinally) {
            // 进行设置
            // console.log(t, textFinally);
            $("#page2text").html(textFinally.text);
            last.text = textFinally;
        }

        if (last.img != imgFinally) {
            // 进行设置
            // console.log(t, imgFinally);
            $("#page2img").attr("src", imgFinally.src);
            last.img = imgFinally;
        }

    }

    // 单程的，播放后无法退回，但是性能更好
    var state = {
        currentText: -1,
        currentImg: -1,
    }

    function checkInfo2(textlsit, imglist, state, t) {
        t = t * 1000;
        //  判断下一段文字是不是该放了
        console.log(state.currentText, textlsit.length);
        
        if (state.currentText + 1 < textlsit.length) {
            const item = textlsit[state.currentText + 1];
            if (item.time < t) {
                // 进行设置
                console.log('切换文字', item.text);
                state.currentText++;
            }
        } 

        // 判断下一张图是不是该放了
        if (state.currentImg + 1 < imglist.length) {
            const item = imglist[state.currentImg + 1];
            if (item.time < t) {
                // 进行设置
                console.log('切换图片', item.src);
                state.currentImg++;
            }
        } 
    }
</script>
</html>